import React from 'react'
import { Header } from 'antd/es/layout/layout';
import { Button,Avatar } from 'antd';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined
} from '@ant-design/icons';
import { useDispatch } from 'react-redux';
import {setCollapsed} from '@/store/reducers/tab'

export default function CommonHeader({collapsed}) {
  const dispatch = useDispatch();
  const isCollapsed = () => {
    dispatch(setCollapsed(collapsed)) 
  }
  return (
    <Header
    className="site-layout-background"
    style={{
      padding: 10,
      background: '#fff',
      paddingLeft: 20,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      height: 70,
    }}
  >
    <Button
    type='text'
    onClick={
      isCollapsed
    }
    style={{
      fontSize: '16px',
      width: 80,
      height: 40,
      background: '#ccc',
      
    }}
    >
      {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
    </Button>

    <Avatar
    size={64} icon={<UserOutlined />} />
    
  </Header>
  )
}
